<template >
  <div style="text-align:left;" v-for="(category,key) in itemsCategory" :key="key">
    <p>{{localCategoryNames[key.toString() as keyof typeof localCategoryNames]}}:</p>
    <a-row >
      <a-col :span="22" :offset="1" v-for="cate in category" :key="cate">
        <p>{{cate.name}}:</p>
        <a-row >
          <a-col class="items" :xxl="{span:4}"   v-for=" item in cate.items" :key="item.item_id">
            <ItemCard :name="item.name_loc" :url="imgUrl(item.img)" :detail="detail(item.name)"/>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { computed, onMounted, provide, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import api from '../../api';
import ItemCard from '../../components/ItemCard.vue';

const items = ref()

const itemsCategory = ref()
const imgUrl = computed(()=>{
  return function(img: any){
    return `/wiki/items/images/${img}}`
  }
})
const detail = computed(()=>{
  return function(name:string){
    if (items.value) {
      return items.value[name]
    }else{
      ''
    }
    
  }
})
  enum localCategoryNames {
    basic= '基础物品',
    upgrade= '升级物品',
    neutral= '中立物品'
  }
onMounted(() => {
  api.wiki.itemscategory().then((res:any) => {
    
    if (res.status!=='success') {
      message.error('获取失败')
      return
    }
    itemsCategory.value=res.result

  }),
  api.wiki.items().then((res:any)=>{
    items.value = res.itemdata
    console.log(items.value['abyssal_blade']['dname']);
  })
})










</script>

<style lang="less" scoped>
.items{
  text-align: center;
}
</style>